<template>
  <div class="container">
    <h1>维修人员与报修任务分配</h1>

    <table v-if="assignments.length > 0" class="assignments-table">
      <thead>
      <tr>
        <th>任务ID</th>
        <th>报修ID</th>
        <th>维修人员ID</th>
        <th>维修人员姓名</th>
        <th>维修类型</th>
        <th>分配时间</th>
        <th>操作</th> <!-- 添加操作列 -->
      </tr>
      </thead>
      <tbody>
      <tr v-for="assignment in assignments" :key="assignment.taskId">
        <td>{{ assignment.taskId }}</td>
        <td>{{ assignment.failureRepairId }}</td>
        <td>{{ assignment.repairPersonnelId }}</td>
        <td>{{ assignment.repairPersonnelName }}</td>
        <td>{{ assignment.maintenanceType }}</td>
        <td>{{ assignment.assignedTime }}</td>
        <td>
          <button @click="deleteAssignment(assignment.taskId)">删除</button> <!-- 添加删除按钮 -->
        </td>
      </tr>
      </tbody>
    </table>
    <p v-else>暂无任务分配记录。</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

const assignments = ref<any[]>([]);

// 组件挂载时获取任务分配数据
onMounted(() => {
  fetchAssignments();
});

// 获取任务分配数据的异步函数
async function fetchAssignments() {
  try {
    const response = await axios.get('http://localhost:8080/repair-tasks1/assignments');
    assignments.value = response.data;
  } catch (error) {
    console.error('获取任务分配数据时出错:', error);
    assignments.value = [];
  }
}

// 删除任务的异步函数
async function deleteAssignment(taskId: number) {
  try {
    await axios.delete(`http://localhost:8080/repair-tasks1/${taskId}`);
    assignments.value = assignments.value.filter(assignment => assignment.taskId !== taskId);
  } catch (error) {
    console.error('删除任务时出错:', error);
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.assignments-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.assignments-table th,
.assignments-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.assignments-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}
</style>
